<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.css">
</head>
<body>
<div id="app">
    <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
            @change="fetchData()">
    </el-date-picker>

    <div id="main" style="width: 200px;height: 200px">

    </div>


    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="categoryName" label="分类名称" width="200">

        </el-table-column>
        <el-table-column prop="num" label="销售数量" width="200">

        </el-table-column>
        <el-table-column label="数量比例" width="200">
            <template slot-scope="scope">
                {{(scope.row.num/totalNum*100).toFixed(0)}}%
            </template>
        </el-table-column>
        <el-table-column prop="money" label="销售金额" width="200">
            <template slot-scope="scope">
                {{(scope.row.money/100).toFixed(2)}}元
            </template>
        </el-table-column>
        <el-table-column label="金额比例" width="200">
            <template slot-scope="scope">
                {{(scope.row.money/totalMoney*100).toFixed(0)}}%
            </template>
        </el-table-column>
    </el-table>
</div>

</body>
</html>
<script src="../js/axios.js"></script>
<script src="../js/util.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/elementui.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/echarts.common.min.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{

                dateRange:[],
                tableData:[],
                totalNum:0,
                totalMoney:0
            }
        },
        methods:{
            fetchData(){
                let date1 = this.dateRange[0].Format("yyyy-MM-dd");
                let date2 = this.dateRange[1].Format("yyyy-MM-dd");
                axios.get(`/categoryReport/category1Count.do?date1=${date1}&date2=${date2}`).then(response=>{
                    this.tableData = response.data;
                    this.totalNum = 0;
                    this.totalMoney = 0;
                    let len = this.tableData.length;
                    let legendDate =[]; //图例数据
                    let numData=[];
                    let moneyData=[];
                    for(let i=0; i <len;i++){
                        this.totalNum += this.tableData[i].num;
                        this.totalMoney += this.tableData[i].money;
                        legendDate.push(this.tableData[i].categoryName);
                        numData.push({name : this.tableData[i].categoryName , value : this.tableData[i].num});
                        moneyData.push({name : this.tableData[i].categoryName , value : this.tableData[i].money})
                    }
                    // 初始化echarts实例
                    let mydiv = document.getElementById("main");
                    let myChart = echarts.init(mydiv);

                    var color = ['#FF801C', '#F5FF46', '#00FE65', '#00FEFF', '#ffa800', '#ff5b00', '#ff3000'];
                    //使用指定的配置项使用图表
                    let option = {
                        title: {
                            text: '一级分类商品',
                            //subtext: '纯属虚构',  //子标题
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            orient: 'horizontal',  //horizontal 水平布局 vertical 垂直布局
                            //left: 'left',
                            //top:"auto",
                            bottom: '20',
                            data: legendDate  //应该是我们查出来的
                        },
                        series: [
                            {
                                name: '销售数量',
                                type: 'pie',
                                radius: '35%',
                                center: ['30%', '50%'],
                                data: numData,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                                        color:'#00FE65'
                                    }
                                }
                            },
                            {
                                name: '销售金额',
                                type: 'pie',
                                radius: '35%',
                                center: ['80%', '50%'],
                                data: moneyData,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                                        color:'#ff3000'
                                    }
                                }
                            }
                        ]
                    };

                    myChart.setOption(option);
                });
            }
        }
    })
</script>